<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" title="户型介绍"></xk-header>

		<scroll-view class="tabs-bar" scroll-x="true">
			<view v-for="(item, index) of tabs" :class="tabIndex === index ? 'item item-a' : 'item'" @click="clickTab(index)" >{{item.title}}</view>
		</scroll-view>
		<view class="list-info">
			<swiper @change="listInfoChange" :current="tabIndex" class="list-swiper">
				<swiper-item v-for="(item, index) of dataList" :key="index">
					<scroll-view class="data-list" scroll-y="true">
						<view class="data-item">
							<uni-swiper-dot class="swiper-dot" :info="item.images" :current="tabImgIndexs[index].index" field="content" mode="round"
								:dotsStyles="{bottom: 40, selectedBackgroundColor: '#fff'}">
								<swiper class="swiper" autoplay="true" :circular="true"
									@change="(e)=>{
										this.tabImgIndexs[index].index = e.target.current
									}" :current="tabImgIndexs[index].index">
									<swiper-item v-for="image of item.images" :key="item.images.indexOf(image)">
										<image mode="aspectFill" class="banner-item" :src="image | formatImgPath"/>
									</swiper-item>
								</swiper>
							</uni-swiper-dot>
							<view class="info">
								<view>
									<view class="name">{{item.title}}</view>
									<view class="amount">{{item.money}}元/㎡天</view>
								</view>
								<view>
									<view>
										<view class="desc">面积</view>
										<view class="desc-content">{{item.area}}㎡</view>
									</view>
									<view>
										<view class="desc">可租</view>
										<view class="desc-content">{{item.num}}套</view>
									</view>
								</view>
							</view>
							<view class="desc-view">
								<view>
									简介
								</view>
								<text space="nbsp">
									{{item.desc}}
								</text>
							</view>
							<view class="common-btn" @click="goEastateInfo()">查看物业</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	let noImg = '/static/no-img.png';
	export default {
		data() {
			return {
				tabIndex: 0,
				tabs: [{
					index: 0,
					title: "工业厂房"
				},{
					index: 1,
					title: "办公楼房"
				},{
					index: 2,
					title: "大型商场房"
				},{
					index: 3,
					title: "酒店公寓楼"
				}],
				tabImgIndexs:[{
					index: 0
				},{
					index: 0
				},{
					index: 0
				},{
					index: 0
				}],
				dataList: []
			};
		},
		onLoad(){
		},
		onHide(){
		},
		onPullDownRefresh(){
			// this.pageNum = 1;
			// this.dkPageNum = 1;
			// this.hdPageNum = 1;
			// this.getActivityInfo(true)
		},
		methods:{
			clickTab(index){
				this.tabIndex = index
			},
			listInfoChange(e){
				this.tabIndex = parseInt(e.target.current)
			},
			goEastateInfo() {
				uni.navigateTo({
					url: "/pages/estate/estate-info"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

.tabs-bar{
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: center;
	padding: 20rpx 30rpx 0rpx 30rpx;
	width: 750rpx;
	background-color: #FFFFFF;
	white-space: nowrap;
	.item{
		display: inline-block;
		height: 65rpx;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		margin-right: 60rpx;
		color: #333333;
		border-bottom: 6rpx solid rgba(#2C72FF, 0);
	}
	.item-a {
		font-weight: bolder;
		border-bottom: 6rpx solid #2C72FF;
	}
}

.list-info {
	.list-swiper{
		height: 1100rpx;
	}
	.data-list{
		border-radius: 10rpx;
		height: 100%;
		.data-item{
			display: flex;
			flex-direction: column;

			.swiper {
				display: flex;
				width: 100%;
				height: 562rpx;
				.banner-item {
					width: 100%;
					height: 100%;
				}
			}

			.info{
				flex: 1;
				display: flex;
				flex-direction: column;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				margin: -50rpx 30rpx 0rpx 30rpx;
				padding: 20rpx;
				z-index: 1;

				>view {
					display: flex;
					align-items: center;
				}
				> view:last-child {
					margin-top: 20rpx;
					align-items: center;
					justify-content: center;
					text-align: center;
					padding: 30rpx 0rpx;
					>view {
						flex: 1;
					}
				}
				.name{
					flex: 1;
					font-size: 32rpx;
					font-weight: bolder;
					color: #333333;
				}
				.desc{
					font-size: 28rpx;
					color: #999999;
				}
				.desc-content {
					font-size: 32rpx;
					color: #333333;
					margin-top: 10rpx;
				}
				.amount{
					font-size: 32rpx;
					color: #FF3737;
					font-weight: bolder;
				}
			}

			.desc-view {
				flex: 1;
				display: flex;
				flex-direction: column;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				margin: 20rpx 30rpx 0rpx 30rpx;
				padding: 20rpx;

				color: #666;
				font-size: 24rpx;

				:first-child {
					color: #333;
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}
			}
		}

	}
}
</style>
